<template>
  <div>
    <!-- 引入头部组件 -->
    <con-title :info="Toptitle"></con-title>
    <!-- 表格 -->
    <div class="tab">
      <div class="search">
        <el-tabs type="border-card" v-model="activeName">
          <el-form
            :inline="true"
            :model="query"
            class="demo-form-inline"
            algin="center"
          >
            <el-form-item label="群组名称" algin="center">
              <el-input
                v-model="query.keyword"
                placeholder="群组名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
              <span :style="{ marginLeft: '20px' }">搜索结果:{{ total }}</span>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="addDialog"
                icon="el-icon-plus"
                :style="{ marginLeft: '90%' }"
                >新增群组</el-button
              >
            </el-form-item>
            <!-- 弹窗 -->
            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%"
            >
              <el-form
                :model="ruleForm"
                width="100%"
                :rules="rules"
                ref="ruleForm"
              >
                <el-form-item
                  :label-width="formLabelWidth"
                  width="100%"
                  prop="groupName"
                >
                  <el-input
                    v-model="ruleForm.groupName"
                    placeholder="群组名称"
                   
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleOk">确 定</el-button>
              </div>
            </el-dialog>
          </el-form>
        </el-tabs>
      </div>
      <el-table :data="grouplist" border style="width: 100%" align="center">
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column prop="groupName" label="群组名称" align="center"> </el-table-column>
        <el-table-column prop="nodeNums" label="传感器节点数量" align="center">
        </el-table-column>
        <el-table-column prop="groupNums" label="在线设备数量" align="center">
        </el-table-column>
        <el-table-column prop="cTime" label="创建时间" algin="center"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              @click="showDialog(scope.row.id, scope.row.groupName)"
              type="text"
              size="small"
              >重命名</el-button
            >
            <el-button type="text" size="small" @click="handleDel(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currPage"
          :page-sizes="[5, 15, 20, 30]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//引入组件
import ConTitle from "@/components/ConTitle.vue";
// import Search from "../../components/search.vue";
//引入后台数据
import { $groupList, $groupAdd, $groupEdit, $groupDel } from "@/api/index.js";
export default {
  name: "grouplist",
  components: { ConTitle },
  data() {
    return {
      Toptitle: {
        type: "设备/",
        text: "节点群组",
        msg: "-以分组形式管理节点设备、提供了搜索、添加新的群组、重命名、移动设备等功能",
      },
      activeName: "all", //默认打开tab状态
      grouplist: [],
      query: {
        keyword: "",
        currPage: 1,
        pageSize: 5,
      },
      total: 0,
      groupName:"",
      dialogTableVisible: false,
      dialogVisible: false, //弹窗是否显示
      formLabelWidth: "0px",
      ruleForm: { groupName: "" },
      rules: {
        // 做验证处理 validata
        groupName: [
          { required: true, message: "请输入群组名称", trigger: "blur" },
        ],
        editId: "", //要修改的ID
      },
    };
  },
  created() {
    this.getGroupList();
  },
  methods: {
    // 删除
    handleDel(id) {
      console.log(id);
      // 删除前需要确认
      this.$confirm("此操作将永远删除该文件，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        $groupDel({id:id}).then((res) => {
          console.log(res);
          if(res.data.code == 666){
            this.$message({
              type:"success",
              message:"删除成功！",
            });
            this.query.currPage = 1;
            // 重新渲染页面
            this.getGroupList();
          }
        });
      }).catch(()=>{
        this.$message({
          type:"info",
          message:"已取消删除",
        })
      });
    },
    // 显示添加接口
    addDialog(){
      this.dialogVisible = true;
      this.editId = "";
      this.ruleForm.groupName = "";
    },

    // 显示修改窗口，并把群组信息带过去
    showDialog(id, groupName){
      this.dialogVisible = true;
      this.editId = id;
      this.ruleForm.groupName = groupName;
    },

    // 点击确定按钮
    handleOk(){
      // 验证提交的数据是否符合表单的验证条件
      console.log(22);
      this.$refs.ruleForm.validate((valid)=>{
        if(valid){
          // 判断是添加还是修改
          if(this.editId == ""){
            // 添加
            this.addItem();
          }else{
            // 修改
            this.editItme();
          }
        }else{
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 添加数据接口
    addItem(){
      $groupAdd({groupName:this.ruleForm.groupName}).then(res=>{
        console.log(res);
        // 判断是否添加成功
        if(res.data.msg == 'success'){
          // 关闭弹窗
          this.dialogVisible = false;
          // 重新渲染页面
          this.getGroupList();
        }
      })
    },
    // 修改
    editItme(){
      $groupEdit({id:this.editId,groupName:this.ruleForm.groupName}).then(res=>{
        console.log(res);
        // 修改成功
        if(res.data.msg == 'success'){
          // 关闭弹窗
          this.dialogVisible = false;
          // 渲染页面
          this.getGroupList();
        }
      })
    },

    // 查询
    onSubmit() {
      console.log(this.keyword);
      this.query.currPage = 1;
      this.getGroupList();
    },

// 数据列表渲染数据
    getGroupList() {
      $groupList(this.query).then((res) => {
        console.log(res.data.data);
        this.grouplist = res.data.data;
        this.groupName = 1;
        // 给总量赋值
        this.total = res.data.total;
      });
    },

    handleSizeChange(num) {
      console.log("显示条数", num);
      this.query.pageSize = num;
      this.query.currPage = 1;

      // 重新获取数据
      this.getGroupList();
    },
    handleCurrentChange(num) {
      console.log("当前页", num);
      // 将当前页赋值个currpage
      this.query.currPage = num;
      // 重新获取数据
      this.getGroupList();
    },
  },
};
</script>

<style scoped lang="scss">
.tab {
  margin-top: 20px;
  .paging {
    width: 100%;
    height: 50px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>